<template>
<div class="studentFinishDetail">
  <div class="studentDetail-header">
    <div class="studentDetail-headertop">
      {{ '2023-2024学年基础工作情况' }}
      <span>已完成</span>
    </div>
    <el-breadcrumb separator="/" class="studentDetail-headerbottom">
      <el-breadcrumb-item :to="{ path: '/mentor/mentorBasic/finish' }">任务列表</el-breadcrumb-item>
      <el-breadcrumb-item>填报详情</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

    <!-- 版心 -->
  <div class="studentFinishDetail-main">
    <div class="studentDetail-main-top">
      <div style="font-weight: 550; font-size: 25px;">
        {{ '天津理工大学期末基础工作情况' }}</div>
      <div style="color: #8a8a8b; text-align: center; margin: 26px 0; font-size: 18px;;">
        {{ '时间：2025/06/11-2025/07/11' }}</div>
    </div>
    
     <!-- 基本要求 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">基本要求</div>
        <div class="set-wmain"><span class="sfd-set-span">支撑材料</span>
            <el-image
              style="width: 100px; height: 150px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>

     <!-- 学生思想引领 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">学生思想引领</div>
        <div class="set-wmain"><span class="sfd-set-span">支撑材料</span>
            <el-image
              style="width: 100px; height: 150px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>

     <!-- 学生学业规划 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">学生学业规划</div>
        <div class="set-wmain"><span class="sfd-set-span">支撑材料</span>
            <el-image
              style="width: 100px; height: 150px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>

     <!-- 学生职业规划 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">学生职业规划</div>
        <div class="set-wmain"><span class="sfd-set-span">支撑材料</span>
            <el-image
              style="width: 100px; height: 150px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>

     <!-- 学生科研成果 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">学生科研成果</div>
        <div class="set-wmain"><span class="sfd-set-span">支撑材料</span>
            <el-image
              style="width: 100px; height: 150px"
              :src="url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>
     

  </div>
</div>
</template>

<script setup>
import { useMentorBasicStore } from '@/stores/mentor/mBasic';
import {onBeforeMount} from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const mentorBsasicStore = useMentorBasicStore()

onBeforeMount(() => {
  const questionnaireId = route.query.id
  mentorBsasicStore.mBFDetailRequest(questionnaireId)
})
// 测试图片
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped lang="scss">
.studentFinishDetail {
  width: 100%;
  height: 100%;
  position: relative;
  .studentDetail-header {
    z-index: 100;
    width: 100%;
    height: 16vh;
    position: sticky;
    top: 0px;
    .studentDetail-headertop {
      width: 100%;
      height: 8vh;
      background-color: #fff;
      border-top: 1px solid #c9c9ca;
      line-height: 8vh;
      font-size: 18px;
      font-weight: 700;
      padding: 0 30px;
      span {
        color: #7f7f7f;
        font-size: 22px;
        font-weight: normal;
        margin-left: 20px;
      }
    }
    .studentDetail-headerbottom {
      width: 100%;
      height: 8vh;
      line-height: 8vh;
      padding: 0 40px;
      font-size: 18px;
      :deep(.el-breadcrumb__inner) {
        font-weight: normal;
        color: #7f7f7f;
      }
    }
  }

  .studentFinishDetail-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;

    .studentDetail-main-subject {
      display: flex;
      flex-direction: column;
      width: 80%;
      background-color: #fff;
      padding: 20px;
      margin: 20px 0;
      .studentDetail-subjectmain {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
  
  }
}
.studentDetailTitle {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 5px solid #165dff;
}
.set-wb {
  width: 30%;
  color: #393d44;
  margin: 5px;
}
.set-wmain {
  width: 100%;
  color: #5d5d60;
  font-size: 14px;
  margin: 10px;
}
.sfd-set-span {
  display: inline-block;
  width: 100px;
  color: #4e5969;
  text-align: right;
  margin-right: 15px;
  vertical-align: top;
}
/* 测试图片格式 */
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

</style>